<template>

    <div class="selection-root">
        
    </div>
    
  
  </template>
  <script setup lang="js">
  
  import { onMounted, ref, watch,onBeforeUnmount} from 'vue';
  import TabsInstance from 'element-plus';
  import category from '@/utils/category';
//   import { server_baseUrl } from '@/config';
  import { ArrowRight } from '@element-plus/icons-vue';
  const tabPosition = ref<TabsInstance['tabPosition']>('left')
  
  const categoryList = ref([]);
  categoryList.value = category();
  // console.log("【解析后的categoryList】",categoryList.value);
  // let str = ['手机','运营商','数码']
  let is_show = ref(false);
  let currentHoverIndex = ref(0);
  
   
  
  /**
   *  监听鼠标在分类标签页item的移入事件
   *  展示对应分类标签页的标签
   */
  function mouseenter(e){
    is_show.value = true;
    currentHoverIndex.value = e.target.id;
  }
  //移出分类组件时
  function mouseleave(e){
    is_show.value = false;
  }
  
  
  
  // 新增代码：获取输入框位置
  const inputRef = ref(null)
  const listPosition = ref({
    top: '0px',
    left: '0px',
    width: '640px'
  })
  
  // 新增代码：计算定位
  const updatePosition = () => {
    if (inputRef.value) {
      const rect = inputRef.value.getBoundingClientRect()
      listPosition.value = {
        top: `${rect.bottom + window.scrollY + 8}px`,
        left: `${rect.left + window.scrollX}px`,
        width: `${rect.width}px`
      }
    }
  }
  
  // 新增代码：监听窗口变化
  onMounted(() => {
    inputRef.value = document.querySelector('.search-area-input')
    updatePosition()
    window.addEventListener('resize', updatePosition)
    window.addEventListener('scroll', updatePosition)
  })
  
  onBeforeUnmount(() => {
    window.removeEventListener('resize', updatePosition)
    window.removeEventListener('scroll', updatePosition)
  })
  
  </script>
  <style lang="scss" scoped>
  
  @import '../../assets/theme.scss';
  
  .selection-root{
    // width: 100%;
    display: flex;
    position: absolute;
    .text-item:hover{
      color: red;
    }
  
    .tabs-content{
      width: 1037px;
      height: 425px;
      font-size: 14px;
      padding: 10px;
      border-radius: 10px;
      background-color: rgb(255, 255, 255);
      border: 3px solid $theme-decorate-color;
      position: sticky;
      top: 20px;
      z-index: 9999;
      
  
      &.is_show{
        display: none;
      }
  
      .tabs-content-have{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: start;
        flex-wrap: wrap;
  
  
        .tabs-content-tags{
          width: 100%;
          display: flex;
          justify-content: start;
          flex-wrap: nowrap;
        }
        .tabs-content-tags-item{
          height: fit-content;
          width: fit-content;
          background-color: $theme-decorate-color-6;
          margin: 10px;
          padding: 2px 5px;
          
          border-radius: 5px;
        }
        .tabs-content-tags-item:hover{
          color: red;
          background-color: $theme-decorate-color-5;
          cursor: pointer;
        }
  
        .tabs-content-name{
          width: 100%;
          height: fit-content;
          display: flex;
          margin-top: 20px;
          flex-wrap: nowrap;
          align-items: start;
  
          .content-name-title{
            width: 80px;
            line-height: 30px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: nowrap;
            // background-color: burlywood;
            // margin-right: 10px;
            
          }
          .content-name-title:hover{
            color: red;
            cursor: pointer;
          } 
  
          .content-name-content{
            padding-left: 10px;
            font-size: 13px;
            display: flex;
            flex-wrap: wrap;
            align-items: start;
            justify-content: start;
            line-height: 30px;
            
            .content-name-content-item:hover{
              color: red;
              cursor: pointer;
            }
  
          }
        }
      }
  
      
    }
    
  }
  
  .el-tab-pane >>> .el-tabs__active-bar{
    // background-color: transparent;
    display: none;
    line-height: 30px;
    font-weight: 600;
    display: flex;
    cursor: pointer;
  }
  
  
   
  </style>